<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            <Button @click="viewLayer">缩放展示图层全部元素</Button>
            <br>
            <Button @click="viewEntity">缩放到指定元素</Button>

        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
var _Element = null;

export default {
    data() {
        return {
            SenceMode: '2D',
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();
        _Element = new simpleMap.ElementDataSource(map);
        // 创建圆形元素
        // add返回值可以返回当前创建的元素对象
        _Element.add('circle', {
            id: 'circle',
            radius: 200000, // 半径
            point: { longitude: 115.0, latitude: 37.0 }, // 圆心点
            color: '#DD00DDCC', // 颜色
        });
        _Element.add('circle', {
            id: 'circle2',
            radius: 200000, // 半径
            point: { longitude: 110.0, latitude: 37.0 }, // 圆心点
            color: '#DD00DDCC', // 颜色
        });
    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
        viewLayer() {
            // 图层的 _Entities 属性为 图层的元素集合

            map.viewTo(_Element._Entities);
        },
        viewEntity() {
            // 元素的 Entity 属性，为元素的属性集合

            var EntityEvent = _Element.GetMappingById('circle2');
            map.viewTo([EntityEvent.Entity]);
        }
    },
    beforeDestroy() {
        // 不需要注销地图时，可单独注销图层
        _Element && _Element.Destroy();

        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>